<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
	<title>quickconfirm.js</title>
		<link rel="stylesheet" type="text/css" href="css" />
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
		<style type="text/css">
			.view_template
			{
				display:none;
			}
			
			.confirmation_window
			{
				border-right:1px solid #e9cec9;
				padding:3px 3px 3px 10px;
				font-family: Avant Garde, Sans-Serif;
				font-size:12px;
				line-height:14px;
				vertical-align:middle;
				position:absolute;
				background: url('back_gradient.png')
			}
			
				.confirmation_window img
				{
					vertical-align:middle;
					padding-right: 6px;
				}
		</style>
	</head>
	<body>
		<input type="text" value="Your Name" />
		<input type="submit" value="Send all" id="send_all_button"/>
		<a href="#">I need to confirm this</a>
		
		<div class="view_template confirmation_window" id="confirmation_window">
			<img src="accept.png"><img src="delete.png">
			<span class="confirm_text">Do you really want to do this?</span>
		</div>
		<script type="text/javascript" src="mootools-1.2-core.js"></script>
		
		<script type="text/javascript">
		Element.implement({
			cloneTemplate: function(newId) {
				var tmp=this.clone();
				newId = (newId || '');
				tmp.set({
					id:newId
				});
				tmp.removeClass('view_template');
				return $(tmp);
			}
		});
		
		var ClickConfirmer=new Class({
				implement: ["Event", "Options"],
				
				options: {
					headline:'Confirm?',
					text:'Do you really want to do that?'
				},
				
				initialize: function(element, options) {
					this.element=$(element);
					
					$(element).addEvent('mouseleave', function (evnt) {
						this.isClicked=false;
					}.bindWithEvent(this));
					
					$(element).addEvent('click', function (evnt) {
						this.confirm();
					}.bindWithEvent(this));
				},
				
				confirm: function() {
					console.log('awaiting confimation');
					var co=this.element.getCoordinates();
					
					$('confirmation_window').cloneTemplate().setStyles({
							left:co.right,
							top:co.top
					}).fade('hide').injectInside(document.body).fade('in');
					console.log('display');
				}
		});
		window.addEvent('domready', function () {
				new ClickConfirmer('send_all_button', {
					headline:'Do you really want to submit this?',
					text:'Sumitting means, that your infomation vanishes forever. It\'s not saved anywhere and I can not recover it'
				});
		});
		</script>
	</body>
</html>
